<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>회원가입</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style>
.left {
	float:left;
	width:20%;
	height:100%;
}

.center {
	float:right;
	width:80%;
	height:100%;
}
</style>

<script>
$(document).ready(function(){
	$.extend({
		validateCheck : function(){
			if($("#id").val() == ""){
				alert("ID를 입력해주세요.");
				$("#id").focus();
				return false;
			}
			if($("#pw").val() == ""){
				alert("PW를 입력해주세요.");
				$("#pw").focus();
				return false;
			}
			if($("#pwCheck").val() != $("#pw").val()){
				alert("PW가 맞지않습니다.");
				$("#pw").focus();
				return false;
			}
			if($("#name").val() == ""){
				alert("이름을 입력해주세요.");
				$("#name").focus();
				return false;
			}
			
			var cell	= $("#cell1").val() + $("#cell2").val() + $("#cell3").val();
			var email	= $("#email1").val() + "@" + $("#email2").val();

			if(cell == "" && email == "@"){
				alert("휴대전화, E-mail 둘 중 하나는 입력해야합니다.");
				$("#email1").focus();
				return false;
			}
			if($("#cell1").val() != "" && cell.length != 7 && cell.length != 8){
				alert("휴대전화번호를 확인해주세요.");
				$("#cell2").focus();
				return false;
			}
			
			return true;
		}
	});
	
	$("select").css("width", "60px");
	
	$("#btn_addMember").click(function(){
		if($.validateCheck()){
			$("#frm_join").attr("action", "<c:url value="/member/join.action"/>");
		}
	});
	
	$("#cell1").change(function(){
		if($(this).val() == ""){
			$("#cell2").attr("readonly", true);
			$("#cell3").attr("readonly", true);
		}else{
			$("#cell2").val("");
			$("#cell3").val("");
			$("#cell2").attr("readonly", false);
			$("#cell3").attr("readonly", false);
		}
	});
	
	$("#birthMonth").change(function(){
		var month = $(this).val();
		var lastDay = 31;
		
		if(month == "2"){
			lastDay = 28;
		}else if(month == "4" || month == "6" || month == "9" || month == "11"){
			lastDay = 30;
		}
		
		var newRow = "";
		
		for(var i = 1; i <= lastDay; i++){
			newRow += "<option value='" + i + "'>" + i + "</option>";
		}
		
		$("#birthDate").empty();
		$("#birthDate").append(newRow);
	});
});
</script>
</head>
<body>
<div class="left">
	<jsp:include page="/layout/left01.jsp"></jsp:include>
</div>

<div class="center">
	<form id="frm_join" method="post">
	<table>
		<tr>
			<th colspan="2" align="center">회원가입</th>
		</tr>
		
		<tr>
			<th>ID</th>
			<td>
				<input type="text" id="id" name="id"/>
				<input type="button" id="idCheck" value="중복확인"/>
			</td>
		</tr>
		
		<tr>
			<th>PW</th>
			<td><input type="password" id="pw" name="pw"/></td>
		</tr>
		
		<tr>
			<th>PW확인</th>
			<td><input type="password" id="pwCheck"/></td>
		</tr>
		
		<tr>
			<th>이름</th>
			<td><input type="text" id="name" name="name"/></td>
		</tr>
		
		<tr>
			<th>생년월일</th>
			<td>
				<select id="birthYear" name="birthYear">
					<c:forEach begin="1950" end="2010" step="1" var="year">
						<option value="${year }">${year }</option>
					</c:forEach>
				</select> 년
				
				<select id="birthMonth" name="birthMonth">
					<c:forEach begin="1" end="12" step="1" var="month">
						<option value="${month }">${month }</option>
					</c:forEach>
				</select> 월
				
				<select id="birthDate" name="birthDate">
					<c:forEach begin="1" end="31" step="1" var="date">
						<option value="${date }">${date }</option>
					</c:forEach>
				</select> 일
			</td>
		</tr>
		
		<tr>
			<th>휴대전화</th>
			<td>
				<select id="cell1">
					<option value="010">010</option>
					<option value="011">011</option>
					<option value="016">016</option>
					<option value="017">017</option>
					<option value="018">018</option>
					<option value="019">019</option>
					<option value="">없음</option>
				</select>
				-
				<input type="text" id="cell2" style="width:50px">
				-
				<input type="text" id="cell3" style="width:50px">
			</td>
		</tr>
		
		<tr>
			<th>E-mail</th>
			<td>
				<input type="text" id="email1"/> @ <input type="text" id="email2"/>
			</td>
		</tr>
		
		<tr>
			<td colspan="2" align="center">
				<input type="button" id="btn_addMember" value="회원가입">
				<input type="button" id="btn_cancel" value="취소">
			</td>
		</tr>
	</table>
	</form>
</div>
</body>
</html>